<template>
  <view class="webview-container">
    <!-- 主WebView -->
    <web-view 
      :src="processedUrl" 
      @message="handleMessage"
      @error="handleError"
      v-if="!showFallback"
    ></web-view>
    
    <!-- 备用方案视图 -->
    <view class="fallback-view" v-if="showFallback">
      <image src="/static/icons/file-error.png" class="error-icon"></image>
      <text class="error-text">文档加载失败</text>
      <button class="retry-btn" @click="retryLoading">重试</button>
      <button class="browser-btn" @click="openInBrowser">用浏览器打开</button>
    </view>
    
    <!-- 加载指示器 -->
    <view class="loading-overlay" v-if="isLoading">
      <view class="loading-content">
        <view class="loading-icon"></view>
        <text class="loading-text">{{ loadingText }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      originalUrl: '',
      processedUrl: '',
      isLoading: true,
      showFallback: false,
      loadingText: '正在加载文档...',
      retryCount: 0
    }
  },
  onLoad(options) {
    if (options.url) {
      this.originalUrl = decodeURIComponent(options.url);
      this.processUrl();
    } else {
      this.showError('URL参数缺失');
    }
  },
  methods: {
    // 处理URL（添加必要的协议头等）
    processUrl() {
      let url = this.originalUrl;
      
      // 修复可能缺少http/https的情况
      if (!url.startsWith('http')) {
        url = 'https://' + url;
      }
      
      // 处理特殊字符（示例）
      url = url.replace(/\(/g, '%28').replace(/\)/g, '%29');
      
      this.processedUrl = url;
      console.log('处理后的URL:', this.processedUrl);
    },
    
    handleMessage(event) {
      console.log('web-view消息:', event);
      this.isLoading = false;
    },
    
    handleError(err) {
      console.error('web-view错误:', err);
      this.isLoading = false;
      
      if (this.retryCount < 2) {
        this.retryCount++;
        this.loadingText = `正在尝试重新加载(${this.retryCount}/2)...`;
        this.isLoading = true;
        setTimeout(() => {
          this.processUrl(); // 重新处理URL
        }, 1500);
      } else {
        this.showFallback = true;
      }
    },
    
    retryLoading() {
      this.showFallback = false;
      this.isLoading = true;
      this.retryCount = 0;
      this.loadingText = '正在加载文档...';
      this.processUrl();
    },
    
    openInBrowser() {
      plus.runtime.openURL(this.processedUrl, (err) => {
        if (err) {
          uni.showToast({
            title: '无法打开浏览器',
            icon: 'none'
          });
        }
      });
    },
    
    showError(message) {
      uni.showToast({
        title: message,
        icon: 'none'
      });
      setTimeout(() => {
        uni.navigateBack();
      }, 1500);
    }
  }
}
</script>

<style>
.webview-container {
  width: 100%;
  height: 100vh;
  position: relative;
}

.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
}

.loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.loading-icon {
  width: 80rpx;
  height: 80rpx;
  border: 6rpx solid #f3f3f3;
  border-top: 6rpx solid #1a7cf7;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 20rpx;
}

.loading-text {
  font-size: 28rpx;
  color: #666;
}

.fallback-view {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40rpx;
}

.error-icon {
  width: 120rpx;
  height: 120rpx;
  margin-bottom: 30rpx;
}

.error-text {
  font-size: 32rpx;
  color: #ff4d4f;
  margin-bottom: 50rpx;
}

.retry-btn, .browser-btn {
  width: 80%;
  height: 80rpx;
  line-height: 80rpx;
  margin-bottom: 30rpx;
  border-radius: 40rpx;
  font-size: 30rpx;
}

.retry-btn {
  background-color: #1a7cf7;
  color: white;
}

.browser-btn {
  background-color: white;
  color: #1a7cf7;
  border: 1px solid #1a7cf7;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>